<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="approvalPrintTaskForm" ref="addPrintTaskFormRef" :rules="addPrintTaskFormRules" :inline="true">
            <el-form-item label="送稿内容" :label-width="formLabelWidth" prop="taskName">
                <el-input v-model="approvalPrintTaskForm.taskName" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="送稿科目" :label-width="formLabelWidth" prop="subjectName">
                <el-input v-model="approvalPrintTaskForm.subjectName" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="userDepartment">
                <el-input v-model="approvalPrintTaskForm.userDepartment" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="使用班级" :label-width="formLabelWidth" prop="userClass">
                <el-input v-model="approvalPrintTaskForm.userClass" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="使用日期" :label-width="formLabelWidth" prop="useDate" v-if="approvalPrintTaskForm.id">
                <el-input v-model="approvalPrintTaskForm.useDate" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="供稿人员" :label-width="formLabelWidth" prop="teacherName">
                <el-input v-model="approvalPrintTaskForm.teacherName" autocomplete="off" ref="name" readonly></el-input>
            </el-form-item>
        </el-form>
        <el-form>
            <el-form-item label="注备" :label-width="formLabelWidth" prop="remark" style="margin-right: 3.5vw">
                <el-input v-model="approvalPrintTaskForm.remark" autocomplete="off" ref="name" type="textarea"
                    readonly></el-input>
            </el-form-item>
            <el-form-item label="附件" :label-width="formLabelWidth" prop="fileList" v-if="approvalPrintTaskForm.id">
                <el-col v-for="item in fileUrlList">
                    <el-button type="success" text @click="handleFilePreview(item.url, item.name)">{{ item.name
                    }}</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-form :model="approvalPrintTaskForm" ref="addPrintTaskFormRef" :rules="addPrintTaskFormRules" :inline="true">
            <el-form-item label="纸张大小" :label-width="formLabelWidth" prop="paperSize">
                <el-input v-model="approvalPrintTaskForm.paperSize" autocomplete="off" ref="name"
                    placeholder="请输入纸张大小"></el-input>
            </el-form-item>
            <el-form-item label="试卷张数" :label-width="formLabelWidth" prop="paperAmount" v-if="approvalPrintTaskForm.id">
                <el-input v-model="approvalPrintTaskForm.paperAmount" autocomplete="off" ref="name"
                    placeholder="请输入每份试卷张数"></el-input>
            </el-form-item>
            <el-form-item label="使用人数" :label-width="formLabelWidth" prop="userAmount" v-if="approvalPrintTaskForm.id">
                <el-input v-model="approvalPrintTaskForm.userAmount" autocomplete="off" ref="name" placeholder="请输入使用人数"
                    @blur="amountSum"></el-input>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth" prop="userAmount" v-if="approvalPrintTaskForm.id">
                <el-input v-model="approvalPrintTaskForm.amount" autocomplete="off" ref="name"
                    placeholder="请输入数量"></el-input>
            </el-form-item>
            <el-form-item label="审批意见" :label-width="formLabelWidth" prop="approvalExplain">
                <el-input v-model="approvalPrintTaskForm.approvalExplain" autocomplete="off" ref="name"
                    placeholder="请填写审批意见"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">提交</el-button>
                <el-button type="primary" @click="returnTask()">退回</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox, } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "approvalPrintTask",
    components: {
        ElForm,
        ElMessageBox,
        ElMessage
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            approvalPrintTaskForm: {
                id: "",
                taskName: "",
                teacherNumber: "",
                teacherName: "",
                campus: "",
                departmentName: "",
                userDepartment: "",
                userClass: "",
                userAmount: "",
                paperAmount: "",
                useDate: "",
                subjectName: "",
                amount: "",
                paperSize: "",
                fileUrl: "",
                printFileUrl: "",
                status: "",
                isDelete: "",
                submitTime: "",
                approvalNumber: "",
                remark: "",
                approvalExplain: "",
                approvalTime: "",
                printStatus: "",
                fileList: [],
                amount: '',
            },
            fileUrlList: [],
            // 校验规则
            addPrintTaskFormRules: {
                userAmount: vxRule(true, 'IntPlus', "blur"),
                paperAmount: vxRule(true, 'Float2', "blur"),
                paperSize: vxRule(true, null, "blur")
            },
        };
    },

    methods: {
        amountSum() {
            if (this.approvalPrintTaskForm.paperAmount != '' && this.approvalPrintTaskForm.userAmount != '') {
                this.approvalPrintTaskForm.amount = this.approvalPrintTaskForm.paperAmount * this.approvalPrintTaskForm.userAmount
            }
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getPrintTaskFormById(id) {
            httpService("/javaApi/printTaskForm/queryById", { id: id }, "get").then(
                (data) => {
                    console.log(data);
                    this.approvalPrintTaskForm = data
                    this.approvalPrintTaskForm.useDate = this.approvalPrintTaskForm.useDate.slice(0, 10)
                    // this.approvalPrintTaskForm.fileList = data.fileUrl.split(';')
                    const fileData = data.fileUrl.split(';')
                    fileData.forEach(item => {
                        if (item != '') {
                            this.fileUrlList.push({
                                // 'url': `http://192.168.9.22:8088${item}`,
                                'url': `https://wx.zhengzhong.cn${item}`,
                                'name': item.split('_')[item.split('_').length - 1]
                            })
                        }
                    })
                    console.log(this.fileUrlList);
                }
            );
        },
        handleFilePreview(url, fileName) {
            let config = { "responseType": "blob" };
            httpService("/pythonApi/printingSystem/getFileData", { fileUrl: url }, 'get', config).then(
                (data) => {
                    let link = document.createElement('a'), fileUrl = window.URL.createObjectURL(new Blob([data]));
                    link.style.display = 'none';
                    link.href = fileUrl;
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(fileUrl)
                }
            )
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.approvalPrintTaskForm.id = "";
            this.approvalPrintTaskForm.taskName = "";
            this.approvalPrintTaskForm.teacherNumber = "";
            this.approvalPrintTaskForm.teacherName = "";
            this.approvalPrintTaskForm.campus = "";
            this.approvalPrintTaskForm.departmentName = "";
            this.approvalPrintTaskForm.userDepartment = "";
            this.approvalPrintTaskForm.userClass = "";
            this.approvalPrintTaskForm.userAmount = "";
            this.approvalPrintTaskForm.paperAmount = "";
            this.approvalPrintTaskForm.useDate = "";
            this.approvalPrintTaskForm.subjectName = "";
            this.approvalPrintTaskForm.amount = "";
            this.approvalPrintTaskForm.paperSize = "";
            this.approvalPrintTaskForm.fileUrl = "";
            this.approvalPrintTaskForm.printFileUrl = "";
            this.approvalPrintTaskForm.status = "";
            this.approvalPrintTaskForm.isDelete = "";
            this.approvalPrintTaskForm.submitTime = "";
            this.approvalPrintTaskForm.approvalNumber = "";
            this.approvalPrintTaskForm.remark = "";
            this.approvalPrintTaskForm.approvalExplain = "";
            this.approvalPrintTaskForm.approvalTime = "";
            this.approvalPrintTaskForm.printStatus = "";
            this.fileUrlList = []
        },
        returnTask() {
            ElMessageBox.confirm("确定要退回本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData();
                    params.append("status", 2);
                    params.append("userAmount", this.approvalPrintTaskForm.userAmount);
                    params.append("paperAmount", this.approvalPrintTaskForm.paperAmount);
                    params.append("paperSize", this.approvalPrintTaskForm.paperSize);
                    params.append("approvalExplain", this.approvalPrintTaskForm.approvalExplain);
                    if (this.approvalPrintTaskForm.id) {
                        params.append("id", this.approvalPrintTaskForm.id);
                        httpService("/javaApi/printTaskForm/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("退回成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getTaskList();
                                } else {
                                    ElMessage.error("退回失败");
                                }
                            }
                        );
                    }
                })
                .catch(() => { });
        },
        save() {
            let params = new FormData();
            this.$refs.addPrintTaskFormRef.validate((valid) => {
                if (valid) {
                    params.append("status", '1');
                    params.append("userAmount", this.approvalPrintTaskForm.userAmount);
                    params.append("paperAmount", this.approvalPrintTaskForm.paperAmount);
                    params.append("paperSize", this.approvalPrintTaskForm.paperSize);
                    params.append("approvalExplain", this.approvalPrintTaskForm.approvalExplain);
                    if (this.approvalPrintTaskForm.id) {
                        params.append("id", this.approvalPrintTaskForm.id);
                        httpService("/javaApi/printTaskForm/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("审批成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getTaskList();
                                } else {
                                    ElMessage.error("审批失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/printTaskForm/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getTaskList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style></style>